<template>
    <a-form :form="form">
        <a-card>
            <a-row type="flex" align="middle">
                <a-col span="6">
                    <a-form-item
                            label="字典名称"
                            :label-col="{span:8}"
                            :wrapper-col="{span:16}"
                    >
                        <a-input
                                v-decorator="['name']"
                                allowClear
                                size="small"
                        />
                    </a-form-item>
                </a-col>
                <a-col span="6">
                    <a-form-item
                            label="字典标签"
                            :label-col="{span:8}"
                            :wrapper-col="{span:16}"
                    >
                        <a-input
                                v-decorator="['tag']"
                                allowClear
                                size="small"
                        />
                    </a-form-item>
                </a-col>
                <a-col span="6">
                    <a-form-item
                            label="创建日期"
                            :label-col="{span:8}"
                            :wrapper-col="{span:16}"
                    >
                        <a-range-picker
                                allowClear
                                v-decorator="['createdDate']"
                                size="small"
                        />
                    </a-form-item>
                </a-col>

                <a-col span="6">
                    <a-space style="float: right">
                        <a-button
                                type="primary"
                                :disabled="this.disable"
                                @click="handleQuery"
                        >
                            查询
                        </a-button>
                        <a-button
                                type="danger"
                                @click="form.resetFields()"
                        >
                            清空
                        </a-button>
                    </a-space>
                </a-col>
            </a-row>
        </a-card>
    </a-form>
</template>

<script>
  import {mapActions, mapMutations, mapState} from 'vuex'
  import {filter} from 'lodash'
  import moment from 'moment'

  export default {
    name: "DictHead",
    data() {
      return {
        form: this.$form.createForm(this),
      }
    },
    computed: {
      ...mapState('dict', ['disable', 'parentId']),
    },
    methods: {
      ...mapMutations('dict', ['setState']),
      ...mapActions('dict', ['queryTreeInfo']),
      handleQuery() {
        this.form.validateFields((err, value) => {
          if (!err) {
            let data = {}
            filter(value, (value, key) => {
              if (value) {
                if (key == 'createdDate' && value.length == 2) {
                  data = {
                    ...data,
                    startDate: moment(value[0]).format("YYYY-MM-DD"),
                    endDate: moment(value[1]).add({day: 1}).format("YYYY-MM-DD"),
                  }
                } else {
                  data = {...data, [key]: value}
                }
              }
            })
            this.setState({name: 'queryData', value: data})
            this.queryTreeInfo({...data, parentId: this.parentId[0]})
          }
        })
      }

    }
  }
</script>

<style scoped>
    /deep/ .ant-form-item {
        margin-bottom: 0px
    }
</style>